<!--
 * @Descripttion:
 * @version:
 * @Author: sueRimn
 * @Date: 2020-11-10 16:43:46
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-13 16:40:08
-->
<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="list-item">
      <div class="item-name">
        <span class="item-row">
          <span v-if="level==2" :style="{'font-size':level==1 ? '17px':''}" class="erJi" @click="roleAuth(item)">{{ item.role_name }}</span>
          <span v-else :style="{'font-size':level==1 ? '17px':''}">{{ item.role_name }}</span>
          <div>
            <el-button v-if="level != 1" v-pageRoles="['5fab7a904b62e']" size="mini" @click="addTeacher(item,level)">添加教师</el-button>
            <el-button v-if="level != 3" v-pageRoles="['5fab7a904b62e']" size="mini" type="primary" @click="add(item,level)">新增</el-button>
            <el-button v-pageRoles="['5fab7a9ab776e']" size="mini" type="success" @click="edit(item,level)">编辑</el-button>
            <el-button v-pageRoles="['5fab7a94d3740']" size="mini" type="danger" @click="del(item,level)">删除</el-button>
          </div>
        </span>
        <div v-for="(teaItem, teaIndex) in item.teacher" :key="teaIndex" class="list-item2">
          <span class="erJi" @click="teacherAuth(teaItem)">
            姓名：{{ teaItem.nickname }}
          </span>
          <div>
            <el-button v-pageRoles="['5fab7a94d3740']" size="mini" type="warning" @click="deleTeacher(item,level,teaItem)">移除教师</el-button>
          </div>
        </div>
      </div>

      <div v-if="item.sub" class="children-item">
        <list :list="item.sub" :level="level + 1" />
      </div>
    </div>
  </div>
</template>

<script>
import Bus from '../bus.js'
export default {
    name: 'List',
    props: {
        list: Array,
        level: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
        }
    },
    methods: {
        add(item, level) {
            Bus.$emit('newAdd', item, level)
        },
        edit(item, level) {
            Bus.$emit('oldEdit', item, level)
        },
        addTeacher(item, level) {
            Bus.$emit('addTeacher', item, level)
        },
        del(item, level) {
            Bus.$emit('delRoles', item, level)
        },
        deleTeacher(item, level, teaItem) {
            Bus.$emit('deleTeacher', item, level, teaItem)
        },
        roleAuth(item) {
            Bus.$emit('roleAuth', item)
        },
        teacherAuth(item) {
            Bus.$emit('teacherAuth', item)
        }
    }
}
</script>

<style scoped lang='scss'>
.item-name {
    font-weight: bold;
    padding-left: 20px;
    margin-bottom: 10px;
    width: 100%;

    .item-row {
       width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
.list-item2 {
    padding-left: 30px;
    font-weight: initial;
    margin: 10px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.children-item {
    padding-left: 30px;
}
.erJi {
    cursor: pointer;
    &:hover{
        color: #ccc;
    }
}
</style>
